<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:body>
        <ui:composition template="/templates/layout.xhtml">
            <ui:define id="content" name="content">
                <h:form id="formId">
                    <p:growl id="growlId" autoUpdate="true" sticky="false" life="10000" showDetail="true" showSummary="false"/>
                    <p:panelGrid id="gridId"
                                 style="padding-bottom: 10px; width: 100%; min-width: 730px; padding: 0px; margin: 0px;">
                        <p:row>
                            <p:column colspan="2" style="text-align: left; padding: 0px; margin: 0px; border: 0">
                                <p:panel header="ข้อมูลพื้นฐาน"  style="border: 0; height: 30px"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right; width: 25%">
                                <p:outputLabel for="acWorkgroup" value="หน่วยงานที่เกิด :" />
                            </p:column>
                            <p:column style="text-align: left; width: 75%">
                                <p:focus context="acWorkgroup"/>
                                <p:selectOneMenu id="acWorkgroup" value="#{riskAddBean.selectedWorkgroup}" 
                                                 converter="#{workgroupConvert}" panelStyle="width:500px"
                                                 required="true" requiredMessage="กรุณากรอกข้อมูลหน่วยงานที่เกิด" 
                                                 effect="fade" effectSpeed="1"
                                                 style="width:500px" filter="true" filterMatchMode="contains">
                                    <f:selectItem itemLabel="ค้นหาหน่วยงานที่เกิดเหตุ" itemDisabled="true"/>
                                    <f:selectItems var="items" value="#{riskAddBean.workgroupList}" itemLabel="#{items.workgroupName}" itemValue="#{items}"/>
                                    <p:ajax event="change"/>
                                </p:selectOneMenu>
                                <font color="red"><h:outputLabel value="**หน่วยงานผู้รับผิดชอบหลัก**"/></font>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">หน่วยงานที่เกี่ยวข้องกับเหตุการณ์ :&nbsp;&nbsp;&nbsp;</p:column>
                            <p:column style="text-align: left">
                                <p:selectOneMenu id="acWorkgroupConn" value="#{riskAddBean.selectedWorkgroupConnected}" 
                                                 converter="#{workgroupConvert}" panelStyle="width:500px"
                                                 effect="fade" effectSpeed="1"
                                                 style="width:500px" filter="true" filterMatchMode="contains">
                                    <f:selectItem itemLabel="ค้นหาหน่วยงานที่เกี่ยวข้องกับเหตุการณ์" itemDisabled="true"/>
                                    <f:selectItems var="items" value="#{riskAddBean.workgroupList}" itemLabel="#{items.workgroupName}" itemValue="#{items}"/>
                                    <p:ajax event="change"/>
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <p:outputLabel for="acSubEvent" value="อุบัติการณ์ความเสี่ยงที่พบ :" />
                            </p:column>
                            <p:column style="text-align: left">
                                <p:autoComplete id="acSubEvent"
                                                required="true"
                                                requiredMessage="กรุณากรอกข้อมูลอุบัติการณ์ความเสี่ยงที่พบ"
                                                size="75"
                                                scrollHeight="200"
                                                queryDelay="1"
                                                value="#{riskAddBean.selectedSubEvent}"
                                                completeMethod="#{riskAddBean.completeSubEvent}"
                                                var="items" itemLabel="#{items.subEventName}" itemValue="#{items}" converter="#{subEventConvert}" forceSelection="true">
                                    <p:ajax event="itemSelect" update="gridId" listener="#{riskAddBean.handleAutoComplete('subEvent')}"/>
                                    <p:column style="width:10px; text-align: center">
                                        #
                                    </p:column>
                                    <p:column style="text-align: left">
                                        #{items.subEventName}
                                    </p:column>
                                </p:autoComplete>
                                <p:watermark for="acSubEvent" value="ค้นหาข้อมูลอุบัติการณ์ความเสี่ยงที่พบ" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <h:outputLabel value="กลุ่มอุบัติการณ์ความเสี่ยงหลัก :&nbsp;&nbsp;&nbsp;" />
                            </p:column>
                            <p:column style="text-align: left; height: 25px">
                                <h:outputText value="#{riskAddBean.selectedMainEvent.mainEventName}"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <h:outputLabel value="ประเภทของอุบัติการณ์ความเสี่ยง :&nbsp;&nbsp;&nbsp;" />
                            </p:column>
                            <p:column style="text-align: left; height: 25px">
                                <h:outputText value="#{riskAddBean.selectedCategory.categoryName}"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">ผู้ได้รับผลกระทบ :&nbsp;&nbsp;&nbsp;</p:column>
                            <p:column style="text-align: left">
                                <p:selectManyCheckbox id="slImpact"
                                                      value="#{riskAddBean.selectedPersonImpactedList}"
                                                      converter="#{personImpactedConvert}"
                                                      layout="pageDirection">
                                    <f:selectItems var="items" value="#{riskAddBean.personImpactedList}" 
                                                   itemLabel="#{items.personImpactedName} " itemValue="#{items}"/>
                                    <p:ajax event="change"/>
                                </p:selectManyCheckbox>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">ผู้ป่วยที่ได้รับผลกระทบ :&nbsp;&nbsp;&nbsp;</p:column>
                            <p:column style="text-align: left">
                                <p:autoComplete id="acPatient" maxResults="20" queryDelay="1"
                                                var="patient" scrollHeight="163"
                                                panelStyle="min-width: 400px;"
                                                styleClass="txtboxCenter"
                                                value="#{riskAddBean.selectedPatient}"
                                                completeMethod="#{riskAddBean.completePatient}"
                                                itemLabel="#{patient.hn}" itemValue="#{patient}" 
                                                converter="#{patientConverter}" forceSelection="true">
                                    <p:ajax event="itemSelect" update="showPatient"/>
                                    <p:ajax event="change" update="showPatient"/>
                                    <p:column style="width:20%; text-align: center">
                                        #{patient.hn}
                                    </p:column>
                                    <p:column style="width:80%; text-align: left">
                                        #{patient.pname}#{patient.fname} #{patient.lname}
                                    </p:column>
                                </p:autoComplete>
                                <p:watermark for="acPatient" value="ค้นหาด้วย HN หรือ ชื่อ" />

                                <p:spacer width="10px"/>

                                <h:outputText value="ชื่อ-นามสกุล: #{riskAddBean.selectedPatient.pname}#{riskAddBean.selectedPatient.fname} 
                                              #{riskAddBean.selectedPatient.lname}" id="showPatient"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <p:outputLabel for="popupButtonCal" value="วันและเวลาที่เกิดเหตุ :" />
                            </p:column>
                            <p:column style="text-align: left">
                                <p:calendar value="#{riskAddBean.selectedDateTime}" id="popupButtonCal" 
                                            required="true" requiredMessage="กรุณาระบุวันและเวลาที่เกิดเหตุ"
                                            maxdate="#{riskAddBean.maxDate}" readonlyInput="true" showOn="button" 
                                            effectDuration="1" pattern="MM/dd/yyyy HH:mm" size="20">
                                    <p:ajax event="dateSelect" listener="#{riskAddBean.handleDateSelect}"/>
                                </p:calendar>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <p:outputLabel for="txtLocation" value="สถานที่เกิดเหตุ :" />
                            </p:column>
                            <p:column style="text-align: left">
                                <p:inputText id="txtLocation" value="#{riskAddBean.txtLocation}" 
                                             required="true" requiredMessage="กรุณากรอกข้อมูลสถานที่เกิดเหตุ" maxlength="100" size="75">
                                    <p:ajax event="change"/>
                                </p:inputText>
                                <p:watermark for="txtLocation" value="กรุณากรอกรายละเอียดสถานที่เกิดเหตุ" />
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="2" style="text-align: left; padding: 0px; margin: 0px; border: 0">
                                <p:panel header="รายละเอียดเหตุการณ์"  style="border: 0; height: 30px"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <p:outputLabel for="txtEventDetails" value="รายละเอียดเหตุการณ์ :" />
                            </p:column>
                            <p:column style="text-align: left">
                                <p:inputTextarea id="txtEventDetails" value="#{riskAddBean.txtEventDetails}"
                                                 required="true" requiredMessage="กรุณากรอกข้อมูลรายละเอียดเหตุการณ์" 
                                                 rows="8" maxlength="2048" autoResize="false" style="width: 99%">
                                    <p:ajax event="change"/>
                                </p:inputTextarea>
                                <p:watermark for="txtEventDetails" value="กรุณากรอกข้อมูลรายละเอียดเหตุการณ์ที่เกิดขึ้น"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">การแก้ไขเบื้องต้น :&nbsp;&nbsp;&nbsp;</p:column>
                            <p:column style="text-align: left">
                                <p:inputTextarea id="txtPreliminaryResolve" value="#{riskAddBean.txtPreliminaryResolve}" 
                                                 rows="6" maxlength="2048" autoResize="false" style="width: 99%">
                                    <p:ajax event="change"/>
                                </p:inputTextarea>
                                <p:watermark for="txtPreliminaryResolve" value="กรอกข้อมูลการแก้ไขเบื้องต้น"/>
                            </p:column>
                        </p:row>

                        <!-- Drug Name Correct (Optional) -->
                        <p:row rendered="#{riskAddBean.isMedError}">
                            <p:column style="text-align: right">ชื่อยาที่ถูก :&nbsp;&nbsp;&nbsp;</p:column>
                            <p:column style="text-align: left">
                                <p:autoComplete id="acDrugCorrect"
                                                required="#{not empty riskAddBean.selectedDrugFalse}"
                                                requiredMessage="กรุณากรอกข้อมูลชื่อยาที่ถูก"
                                                size="75"
                                                scrollHeight="200"
                                                queryDelay="300"
                                                value="#{riskAddBean.selectedDrugTrue}"
                                                completeMethod="#{riskAddBean.completeDrugItems}"
                                                var="items" itemLabel="#{items.name} #{items.strength} #{items.units}" itemValue="#{items}" 
                                                converter="#{drugItemsConvert}" forceSelection="true">
                                    <p:ajax event="itemSelect"/>
                                    <p:ajax event="change"/>
                                </p:autoComplete>
                                <p:message for="acDrugCorrect"/>
                            </p:column>
                        </p:row>

                        <!-- Drug Name Wrong (Optional) -->
                        <p:row rendered="#{riskAddBean.isMedError}">
                            <p:column style="text-align: right">ชื่อยาที่ผิด :&nbsp;&nbsp;&nbsp;</p:column>
                            <p:column style="text-align: left">
                                <p:autoComplete id="acDrugWrong"
                                                required="#{not empty riskAddBean.selectedDrugTrue}"
                                                requiredMessage="กรุณากรอกข้อมูลชื่อยาที่ผิด"
                                                size="75"
                                                scrollHeight="200"
                                                queryDelay="300"
                                                value="#{riskAddBean.selectedDrugFalse}"
                                                completeMethod="#{riskAddBean.completeDrugItems}"
                                                var="items" itemLabel="#{items.name} #{items.strength} #{items.units}" itemValue="#{items}" 
                                                converter="#{drugItemsConvert}" forceSelection="true">
                                    <p:ajax event="itemSelect"/>
                                    <p:ajax event="change"/>
                                </p:autoComplete>
                                <p:message for="acDrugWrong"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="2" style="text-align: left; padding: 0px; margin: 0px; border: 0">
                                <p:panel header="ระดับความรุนแรง" style="border: 0; height: 30px"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <p:outputLabel for="slSeverityLevel" value="ระดับความรุนแรง :" />
                            </p:column>
                            <p:column style="text-align: left">
                                <p:selectOneMenu id="slSeverityLevel"
                                                 required="true"
                                                 requiredMessage="กรุณากรอกข้อมูลระดับความรุนแรง"
                                                 effectSpeed="1"
                                                 disabled="#{empty riskAddBean.selectedCategory}"
                                                 value="#{riskAddBean.selectedSeverityLevelDetail}"
                                                 converter="#{severityLevelDetailConvert}"
                                                 style="cursor: pointer; width: 503px; vertical-align: middle">
                                    <f:selectItem itemLabel="&mdash;&mdash;&mdash;&mdash;&mdash; กรุณาเลือกข้อมูลจากรายการ &mdash;&mdash;&mdash;&mdash;&mdash;"/>
                                    <f:selectItems var="sldescs" value="#{riskAddBean.severityLevelDetailsList}"
                                                   itemDescription="#{sldescs.slDetailExplanation}"
                                                   itemLabel="#{sldescs.severityLevel.severityLevelName}" itemValue="#{sldescs}"/>
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column colspan="2" style="text-align: left; padding: 0px; margin: 0px; border: 0">
                                <p:panel header="สาเหตุของความเสี่ยง" style="border: 0; height: 30px"/>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <p:outputLabel for="slMainCause" value="สาเหตุหลัก :" />
                            </p:column>
                            <p:column style="text-align: left">
                                <p:selectOneMenu id="slMainCause"
                                                 required="true"
                                                 requiredMessage="กรุณากรอกข้อมูลสาเหตุหลัก"
                                                 effectSpeed="1"
                                                 value="#{riskAddBean.selectedMainCause}"
                                                 converter="#{mainCauseConvert}"
                                                 style="cursor: pointer; width: 503px">
                                    <f:selectItem itemLabel="&mdash;&mdash;&mdash;&mdash;&mdash; กรุณาเลือกข้อมูลจากรายการ &mdash;&mdash;&mdash;&mdash;&mdash;"/>
                                    <f:selectItems var="mainCauses" value="#{riskAddBean.mainCauseList}"
                                                   itemLabel="#{mainCauses.mainCauseName} " itemValue="#{mainCauses}"/>
                                    <p:ajax update="slSubCause" listener="#{riskAddBean.handleSelectionRelate('subCause')}"/>
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>

                        <p:row>
                            <p:column style="text-align: right">
                                <p:outputLabel for="slSubCause" value="สาเหตุรอง :" />
                            </p:column>
                            <p:column style="text-align: left">
                                <p:selectOneMenu id="slSubCause"
                                                 required="true"
                                                 requiredMessage="กรุณากรอกข้อมูลสาเหตุรอง"
                                                 effectSpeed="1"
                                                 value="#{riskAddBean.selectedSubCause}"
                                                 converter="#{subCauseConvert}"
                                                 widgetVar="wgCuSc"
                                                 disabled="#{empty riskAddBean.selectedMainCause}"
                                                 style="cursor: pointer; width: 503px">
                                    <f:selectItem itemLabel="&mdash;&mdash;&mdash;&mdash;&mdash; กรุณาเลือกข้อมูลจากรายการ &mdash;&mdash;&mdash;&mdash;&mdash;"/>
                                    <f:selectItems var="subCauses" value="#{riskAddBean.subCauseList}"
                                                   itemLabel="#{subCauses.subCauseName} " itemValue="#{subCauses}"/>
                                </p:selectOneMenu>
                            </p:column>
                        </p:row>
                    </p:panelGrid>

                    <div align="center">
                        <p:panelGrid style="text-align: center; margin-top: 10px; margin-bottom: 50px;">
                            <p:row>
<!--                                <p:column rendered="#{not empty riskAddBean.riskData}">
                                    <p:commandButton value="รับทราบ" icon="ui-icon-check" 
                                                     ajax="false" action="#{riskAddBean.review()}"
                                                     rendered="#{riskAddBean.canReview()}" 
                                                     style="width: 100%"/>
                                </p:column>-->
                                <p:column>
                                    <p:commandButton value="บันทึกข้อมูล" update="gridId"
                                                     actionListener="#{riskAddBean.save}" 
                                                     rendered="#{empty riskAddBean.riskData}" 
                                                     icon="ui-icon-disk" style="width: 100%"/>
                                    <p:commandButton value="ปรับปรุงข้อมูล" update="gridId"
                                                     actionListener="#{riskAddBean.update}"
                                                     icon="ui-icon-wrench" style="width: 100%" 
                                                     rendered="#{not empty riskAddBean.riskData}"/>
                                </p:column>
                                <p:column>
                                    <p:commandButton value="เคลียร์ข้อมูล" ajax="false" immediate="true" 
                                                     action="#{riskAddBean.destroy()}" 
                                                     rendered="#{empty riskAddBean.riskData}" 
                                                     icon="ui-icon-cancel" style="width: 100%"/>
                                    <p:commandButton value="คืนค่าเดิม" action="#{riskAddBean.reset}" ajax="false"
                                                     icon="ui-icon-refresh" immediate="true" style="width: 100%" 
                                                     rendered="#{not empty riskAddBean.riskData}"/>
                                </p:column>
                                <p:column>
                                    <p:commandButton value="บันทึกรายการใหม่" icon="ui-icon-disk" 
                                                     ajax="false" action="#{riskAddBean.saveAs}" 
                                                     rendered="#{not empty riskAddBean.riskData}"
                                                     style="width: 100%"/>
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </div>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>